<template>
  <div class="app-container">
    <p>项目名: {{ pNames }}</p>
    <el-form size="small" :inline="true" label-width="68px">
      <el-form-item>
        <!-- 时间段成行状态切换 -->
        <el-button-group class="float-right">
            <el-button type="primary" @click.native="showCanGo" :class="{ 'selected-button': selectedButton === 'canGo' }" icon="el-icon-check" size="mini" >成行路线</el-button>
          <el-button type="primary" @click.native="showNotCanGo" :class="{ 'selected-button': selectedButton === 'notCanGo' }" size="mini" >未成行路线<i class="el-icon-close"></i></el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <div>
      <!-- 根据 comName 值动态加载不同的组件 -->
      <component :is="comName" :pId="pId"></component>
    </div>
  </div>
</template>

<script>
import canGo from './timeComponents/canGo.vue'
import notCanGo from './timeComponents/notCanGo.vue'

export default {
  name: "notOrYes",
  data() {
    return {
      pId: undefined,
      pNames: undefined,
      comName: 'notCanGo',
      selectedButton: 'notCanGo',
    };
  },
  created() {
    this.getOne();
  },
  methods: {
    getOne() {
      this.pId = this.$route.query.projectId;
      this.pNames = this.$route.query.projectName;
    },
    showCanGo() {
      this.comName = 'canGo';
      this.selectedButton = 'canGo';
    },
    showNotCanGo() {
      this.comName = 'notCanGo';
      this.selectedButton = 'notCanGo';
    },
  },
  components: {
    canGo,
    notCanGo,
  },
};
</script>

<style scoped>
/* 选中的按钮背景颜色为黄色 */
.app-container .selected-button {
  background-color: #f8be01;
  color: #ffffff;
}

/* 未选中的按钮背景颜色为黑色 */
.app-container .el-button:not(.selected-button) {
  background-color: #1f0101;
  color: #ffffff;
}
</style>
